<template>
  <div class="dashboard-container">
<div class="one">
        <el-link type="danger" class="sm" >说明：目前支持学科和关键字条件筛选</el-link><br>
    <el-button type="success"  class="el-icon-edit" size="small">新增试题</el-button>
</div>

      <span>学科 </span> <el-select v-model="value" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

    <span>二级目录 </span> <el-select v-model="options1.label" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <span>标签</span><el-select v-model="options2.label" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>

    <span>关键字 </span><el-input class="kuang" v-model="input" placeholder="根据题干搜索"></el-input>
<br>
    <span>试题类型</span><el-select v-model="options3.label" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options3"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>

    <span>难度</span><el-select v-model="options4.label" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options4"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>

    <span>方向</span><el-select v-model="options5.label" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options5"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>

    <span>录入人</span><el-select v-model="options6.label" placeholder="请选择" class="xuan">
    <el-option
      v-for="item in options6"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
  <br>
    <span>题目备注</span><el-input class="kuang" v-model="timu" placeholder=""></el-input>

    <span>企业简称</span><el-input class="kuang" v-model="jiancheng" placeholder=""></el-input>

        <citys v-model="provAndCity" />

        <span>城市</span>  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
         <!-- <el-form-item label="城市">
        <MyCity v-model="formData.provAndCity"/>
      </el-form-item> -->
    <!-- <companys></companys> -->

   <el-button type="primary" icon="el-icon-search" class="qsq" size="small">搜索</el-button>
  <el-button type="black" icon=""  class="qs" size="small">清除</el-button>

  <br>
<el-row :gutter="10">
  <el-col :xs="30" :sm="30" :md="30" :lg="30" :xl="30" >
    <div class="grid-content bg-purple" >
      <span class="el-icon-info">数据一共3条</span>
      </div>
    </el-col>

</el-row>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
       <el-table-column
    fixed
      prop=""
      label=""
      width="10">
    </el-table-column>
    <el-table-column

      prop="date"
      label="试题编号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="xueke"
      label="学科"
      width="100">
    </el-table-column>
    <el-table-column
      prop="province"
      label="目录"
      width="100">
    </el-table-column>
    <el-table-column
      prop="city"
      label="题型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="题干"
      width="200">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="录入时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="nandu"
      label="难度"
      width="100">
    </el-table-column>
    <el-table-column
      prop="lururen"
      label="录入人"
      width="100">
    </el-table-column>
    <el-table-column

      prop="cz"
      label="操作"
      width="250"
      >
      <el-button class="tu" size="small" icon="el-icon-view" @click="open2"></el-button>
      <el-button class="tu" size="small"  icon="el-icon-edit" @click="gotolink" plain ></el-button>
      <el-button  class="tu" size="small"  icon="el-icon-delete-solid" @click="open"></el-button>
      <el-button  class="tu"  size="small"  icon="el-icon-check" @click="open1"></el-button>

    </el-table-column>
        <el-table-column
    fixed="right"
    prop=""
    label=""
    width="10">
    </el-table-column>

  </el-table>

<div class="idd">
         <span class="feng">页</span>
       <el-input v-model="haha" placeholder="" class="haha"></el-input>
        <span class="feng">跳转</span>

         <el-select v-model="select.label" placeholder="5条/页" class="ye">
    <el-option
      v-for="item in select"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

     <el-pagination
           background
           layout="prev, pager, next"
           :total="50"
           class="fen"
           >
       </el-pagination>

</div>

  </div>
</template>

<script>
// import companys from './companys/companys-add.vue'

import citys from './companys/citys'
export default {
  components: {
    // companys,
    citys
  },
  data () {
    return {
      provAndCity: {
        province: '',
        city: ''
      },
      select: [{
        value: '选项1',
        label: '5条/页'
      }, {
        value: '选项2',
        label: '10条/页'
      }, {
        value: '选项3',
        label: '20条/页'
      }, {
        value: '选项4',
        label: '50条/页'
      }],
      tableData: [{
        date: 'ck9tp300z0001kwo5hztbh95s',
        xueke: 'java',
        province: 'css基础',
        city: '单选',
        address: '1111',
        zip: '2022-08-16 21:27:24',
        nandu: '简单',
        lururen: '超级管理员',
        cz: ''

      }, {
        date: 'ck9gmm2z20000vko57xp9752i',
        xueke: 'js基础',
        province: 'java基础',
        city: '多选',
        address: 'djidjidjdi',
        zip: '2022-08-16 21:27:24',
        nandu: '一般',
        lururen: '超级管理员',
        cz: ''

      }, {
        date: 'ck9gy6yhr00005wo53pb8ceyx',
        xueke: 'c++',
        province: 'css基础',
        city: '多选',
        address: 'okdokopk',
        zip: '2021-08-16 21:27:24',
        nandu: '困难',
        lururen: '超级管理员',
        cz: ''
      }, {
        date: 'ck9gmofeg0001vko58jm7cpso',
        xueke: '前端',
        province: 'js基础',
        city: '单选',
        address: '!!!!',
        zip: '2020-08-16 21:27:24',
        nandu: '简单',
        lururen: '超级管理员',
        cz: ''

      }],
      options: [{
        value: '选项1',
        label: 'java script'
      }, {
        value: '选项2',
        label: '前端'
      }, {
        value: '选项3',
        label: 'java'
      }, {
        value: '选项4',
        label: 'php'
      }, {
        value: '选项5',
        label: 'python'
      },
      {
        value: '选项6',
        label: '运维'
      },
      {
        value: '选项7',
        label: '算法'
      },
      {
        value: '选项8',
        label: 'c++'
      },
      {
        value: '选项9',
        label: '产品'
      },
      {
        value: '选项10',
        label: '安卓'
      },
      {
        value: '选项11',
        label: 'ios'
      }
      ],

      options1: [{
        value: '选项1',
        label: 'reach'
      }, {
        value: '选项2',
        label: 'vue基础'
      }, {
        value: '选项3',
        label: 'js基础'
      }, {
        value: '选项4',
        label: 'css基础'
      }],

      options2: [{
        value: '选项1',
        label: 'h5'
      }, {
        value: '选项2',
        label: 'css3'
      }, {
        value: '选项3',
        label: 'bfc'
      }, {
        value: '选项4',
        label: 'jquery'
      },
      {
        value: '选项5',
        label: 'mvvm'
      },
      {
        value: '选项6',
        label: '语言'
      }],

      options3: [{
        value: '选项1',
        label: '单选'
      }, {
        value: '选项2',
        label: '多选'
      }, {
        value: '选项3',
        label: '问答'
      }],

      options4: [{
        value: '选项1',
        label: '简单'
      }, {
        value: '选项2',
        label: '一般'
      }, {
        value: '选项3',
        label: '困难'
      }],

      options5: [{
        value: '选项1',
        label: 'o2o'
      }, {
        value: '选项2',
        label: '外包服务'
      }, {
        value: '选项3',
        label: '企业服务'
      },
      {
        value: '选项4',
        label: '互联网金融'
      }, {
        value: '选项5',
        label: '企业咨询'
      }, {
        value: '选项6',
        label: '电子商务'
      }],

      options6: [{
        value: '选项1',
        label: '1111'
      }, {
        value: '选项2',
        label: '等等'
      }, {
        value: '选项3',
        label: '2222'
      }],
      options7: [{
        value: '选项1',
        label: '北京市'
      }, {
        value: '选项2',
        label: '上海市'
      }, {
        value: '选项3',
        label: '天津市'
      }, {
        value: '选项4',
        label: '石家庄市'
      }, {
        value: '选项5',
        label: '邯郸市'
      },
      {
        value: '选项6',
        label: '唐山市'
      },
      {
        value: '选项7',
        label: '秦皇岛市'
      }

      ],
      value: '',
      input: '',
      timu: '',
      jiancheng: '',
      haha: '1'
    }
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    open () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    open1 () {
      this.$confirm('此操作将加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        })
      })
    },
    gotolink () {
      this.$router.push({ path: '/new' })
    },
    open2 () {
      const h = this.$createElement
      this.$msgbox({
        title: '题目预览',
        message: h('p', null, [

          h('span', null, { style: 'margin:10px' }, '【题型】:'),
          h('i', { style: 'margin:10px' }, '【题型】:'),
          h('span', null, { style: 'margin:10px' }, '【题型】:')
        ]),

        confirmButtonText: '关闭',

        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true

            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 10)
            }, 10)
          } else {
            done()
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        })
      })
    }

  }
}
</script>

<style scoped>
.tu{
 float: left;

 border-radius: 100px;

}
.ye{

  width: 100px;
  float: right;
   margin-top: 5px;
   margin-right: 10px;
}
.fen{
  float: right;
   margin-top: 10px;
}
.feng{
    float: right;
  margin-top: 14px;
  /* padding: 5px; */
  margin-right: 5px;
  margin-left: 5px;
}
.haha{
  width:50px;
  float:right;
   margin-top: 5px;
   margin-right: 10px;
}
.idd{
  text-align: right;

  height: 50px;
  width: 100%;
}
 .kuang{
   width: 150px;
   margin-left: 0px;
   margin-right: 20px;
 }
   .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;

  }
  .el-icon-edit{
    float: right;
  }
  span{
    margin: 5px;
    /* margin-right: 0px; */
    font-size: 15px;
    font-weight: 700;
    color: dimgray;
    margin-left: 20px;

  }

  .qs{
    float: right;
    margin: 10px;
  }
  .qsq{
    float: right;
     margin: 10px;
    margin-right: 20px;
  }
  .el-icon-edit{
    margin: 10px;
    margin-right: 20px;
  }
  .one{
    width: 100%;
    height: 60px;
    /* background-color: blue; */
  }
  .sm{
    margin-top: 10px;
    margin-left: 20px;
    font-size: 2px;
  }
  .xuan{
    width: 150px;
    margin: 10px ;
    margin-left: 0;
    margin-right: 20px;

  }
  .el-icon-info{
    /* text-align: center; */
    margin-top: 13px ;
    margin-right: 10px;
    font-weight: 400;
    font-size: 13px;
    padding-left: 10px;
  }
</style>
